<!-- 运营数据的组件 -->
<template>
<div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/hemo' }">Home</el-breadcrumb-item>
    <el-breadcrumb-item>运营数据</el-breadcrumb-item>
    <el-breadcrumb-item>订单情况</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="home">
    <div class="box">
        <div style="background-color: #fc3158;">
          <h5 style="font-size:20px;margin-left: 15px;">新增订单：</h5>
          <h5 style="font-size:20px;margin-left: 20px;">{{box1}}件</h5>
        </div>
        <div style="background-color: #53d769;">
          <h5 style="font-size:20px;margin-left: 15px;">退货订单：</h5>
          <h5 style="font-size:20px;margin-left: 20px;">{{box2}}件</h5>
        </div>
        <div style="background-color: #147efb;">
          <h5 style="font-size:20px;margin-left: 15px;">销售金额：</h5>
          <h5 style="font-size:20px;margin-left: 20px;">{{box3}}万元</h5>
        </div>
        <div style="background-color: #635a5a;">
          <h5 style="font-size:20px;margin-left: 15px;">成交金额：</h5>
          <h5 style="font-size:20px;margin-left: 20px;">{{box4}}万元</h5>
        </div>
      </div>
    <div style="margin-left: 35px; margin-top: 40px; height: 280px;width: 662px;">
      <el-tabs type="border-card">
        <!-- <el-tab-pane label="订单配送">
          <div class="dibu_box1" id="echart1"></div>
        </el-tab-pane> -->
        <el-tab-pane label="订单支付状态">
          <div class="dibu_box1" id="echart2"></div>
        </el-tab-pane>
        <el-tab-pane label="订单点击来源">
            <div class="dibu_box1" id="echart1"></div>
        </el-tab-pane>
        <el-tab-pane label="销售商品前十">
            <div class="dibu_box1" id="echart3"></div>
        </el-tab-pane>
        <el-tab-pane label="热买用户年龄">
            <div class="dibu_box1" id="echart4"></div>
        </el-tab-pane>
        <el-tab-pane label="退货退款原因">
            <div class="dibu_box1" id="echart5"></div>
        </el-tab-pane>

      </el-tabs>
    </div>
  </div>
</div>
</template>

<script>
import axios from 'axios'
// import echarts from 'echarts'
export default {
  data () {
    return {
      //  订单情况第一行的数据
      box1: '',
      box2: '',
      box3: '',
      box4: '',
      // 2.订单点击来源
      echarts1_data: [],
      // 1.订单支付状态
      echarts2_data: [],
      // 3.订单商品销售的数据
      echarts3_data_y: ['a', 'b', 'c', 'd', 'e', 'f'],
      echarts3_data_x: [124, 11726, 12745, 13170, 21319, 24934],
      // 4.用户年龄
      echarts4_name: [],
      echarts4_data: [],
      // 5.退款原因
      echarts5_data: [{
        value: 285,
        name: '黑名单查询'
      }, {
        value: 410,
        name: '红名单查询'
      }, {
        value: 274,
        name: '法人行政处罚'
      }]

    }
  },
  mounted () {},
  created () {
    // 调用methods的axios
    this.getbox()
    this.getdingdanpeisong()
    this.getdingdanzhuangtai()
    this.getdingdanqianshi()
    this.getyonghunianling()
    this.getdingdantuikuan()
  },
  methods: {
    // axios请求订单情况第一行
    async getbox () {
      try {
        const res = await this.$axios.get('http://47.106.237.228:10004/api/houtai/yunyingshuju/dingdan/diyi')
        const tup = res.data.data[0]
        this.box1 = tup.xinzengdingdan
        this.box2 = tup.tuihuodingdan
        this.box3 = tup.xiaoshoujine
        this.box4 = tup.chengjiaojine
      } catch (error) {
        console.log(error)
      }
    },
    // axios请求订单情况 第二行 1.订单点击来源
    async getdingdanpeisong () {
      try {
        const res = await this.$axios.get('http://47.106.237.228:10004/api/houtai/yunyingshuju/dingdan/laiyuan')
        this.echarts1_data = res.data.data
        // 调用echarts1的方法
        this.drawLine()
      } catch (error) {
        console.log(error)
      }
    },
    // axios请求订单情况 第二行 2.订单支付状态
    async getdingdanzhuangtai () {
      try {
        const res = await this.$axios.get('http://47.106.237.228:10004/api/houtai/yunyingshuju/dingdan/zhuangtai')
        this.echarts2_data = res.data.data
        // 调用echarts2的方法
        this.drawLine1()
      } catch (error) {
        console.log(error)
      }
    },
    // axios请求订单情况 第二行 3.商品销售前十
    async getdingdanqianshi () {
      try {
        const res = await this.$axios.get('http://47.106.237.228:10004/api/houtai/yunyingshuju/dingdan/qianshi')
        const tup = res.data.data
        // console.log(tup)
        var dataname = [] // 存放name
        var datavalue = [] // 存放value
        for (var i = 0; i <= 5; i++) {
          dataname.push(tup[i].name)
          datavalue.push(tup[i].value)
          // console.log(dataname)
        }
        // console.log(dataname)
        this.echarts3_data_y = dataname
        this.echarts3_data_x = datavalue
        this.drawLine3()
      } catch (error) {
        console.log(error)
      }
    },
    // axios请求订单情况 第二行 4.用户年龄
    async getyonghunianling () {
      try {
        const res = await this.$axios.get('http://47.106.237.228:10004/api/houtai/yunyingshuju/dingdan/yonghunianling')
        const tup = res.data.data
        var dataname = [] // 存放name
        var datavalue = [] // 存放value
        for (var i = 0; i <= 2; i++) {
          dataname.push(tup[i].name)
          datavalue.push(tup[i].value)
          // console.log(dataname)
        }
        this.echarts4_name = dataname
        this.echarts4_data = datavalue
        this.drawLine4()
      } catch (error) {
        console.log(error)
      }
    },
    // axios请求订单情况 第二行 5.退款原因
    async getdingdantuikuan () {
      try {
        const res = await this.$axios.get('http://47.106.237.228:10004/api/houtai/yunyingshuju/dingdan/tuikuan')
        this.echarts5_data = res.data.data
        // 调用echarts1的方法
        this.drawLine5()
      } catch (error) {
        console.log(error)
      }
    },
    // eslint-disable-next-line space-before-function-paren
    // 订单配送的echarts1
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('echart1'))
      var data1 = this.echarts1_data
      // console.log(data1)
      var colorList = ['#02F2F3', '#68B5FB', '#D45A49', '#F3E58D', '#FFF']
      myChart.setOption({
        backgroundColor: '#0e2147',
        // backgroundColor: '#red ',
        tetle: {
          text: '各大物流公司的订单占比',
          x: '40%',
          fontSize: 11,
          textStyle: {
            color: '#05F0EE',
            fontSize: '11'
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '8'

          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          // 可设定图例在左、右、居中
          y: 'bottom',
          // 可设定图例在上、下、居中
          textStyle: {
            fontSize: 10,
            color: '#fff'
          }
        },
        series: [{
          name: '点击来源',
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['14%', '45%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList[params.dataIndex]
              }
            }
          },
          emphasis: {
            label: {
              show: true,
              position: 'outside',
              fontSize: '10',
              formatter: function (params) {
                var percent = 0
                var total = 0
                for (var i = 0; i < data1.length; i++) {
                  total += data1[i].value
                }
                percent = ((params.value / total) * 100).toFixed(0)
                if (params.name !== '') {
                  return params.name + '\n' + params.value + '次' + '\n' + '占百分比：' + percent + '%'
                } else {
                  return ''
                }
              }
            }
          },
          labelLine: {
            show: false
          },
          data: data1
        }]
      })
    },
    // 订单配送的echarts2
    drawLine1 () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('echart2'))
      var dataArr = 60
      var color = ['#FC4567', '#2F8DF4', '#C25EC4']
      // 绘制图表
      myChart.setOption({
        color: color,
        backgroundColor: '#0A173B',
        title: {
          text: '订单支付情况',
          left: 'center',
          top: '0%',
          textStyle: {
            fontSize: 12,
            color: '#fff',
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          x: 'right', // 可设定图例在左、右、居中
          y: 'bottom', // 可设定图例在上、下、居中
          textStyle: {
            fontSize: 10,
            color: '#fff'
          }
        },
        series: [{
          type: 'pie',
          roseType: 'radius',
          radius: ['30%', '50%'],
          data: this.echarts2_data,
          label: {
            normal: {
              formatter: '{font|{c}}\n{hr|}\n{font|{d}%}',
              rich: {
                font: {
                  fontSize: 10,
                  padding: [5, 0],
                  color: '#fff'
                },
                hr: {
                  height: 0,
                  borderWidth: 1,
                  width: '100%',
                  borderColor: '#fff'
                }
              }
            }
          },
          labelLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0,0,0,0.5)'
            }
          }
        }]
      })
    },
    drawLine3 () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('echart3'))
      var myColor = ['#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3']
      const echarts3_data_y = this.echarts3_data_y
      const echarts3_data_x = this.echarts3_data_x
      myChart.setOption({
        backgroundColor: '#0e2147',
        grid: {
          left: '25%',
          top: '12%',
          right: '25%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: [{
          show: false
        }],
        yAxis: [{
          axisTick: 'none',
          axisLine: 'none',
          offset: '27',
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize: '16'
            }
          },
          data: echarts3_data_y
        }, {
          axisTick: 'none',
          axisLine: 'none',
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize: '0'
            }
          },
          data: [6, 5, 4, 3, 2, 1]
        }, {
          name: '工作地TOP 10',
          nameGap: '30',
          nameTextStyle: {
            color: '#ffffff',
            fontSize: '30'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0)'
            }
          },
          data: []
        }],
        series: [{
          name: '条',
          type: 'bar',
          yAxisIndex: 0,
          data: echarts3_data_x,
          label: {
            normal: {
              show: true,
              position: 'right',
              textStyle: {
                color: '#ffffff',
                fontSize: '16'
              }
            }
          },
          barWidth: 12,
          itemStyle: {
            normal: {
              color: function (params) {
                var num = myColor.length
                return myColor[params.dataIndex % num]
              }
            }
          },
          z: 2
        }, {
          name: '白框',
          type: 'bar',
          yAxisIndex: 1,
          barGap: '-100%',
          data: [99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
          barWidth: 20,
          itemStyle: {
            normal: {
              color: '#0e2147',
              barBorderRadius: 5
            }
          },
          z: 1
        }, {
          name: '外框',
          type: 'bar',
          yAxisIndex: 2,
          barGap: '-100%',
          data: [100, 100, 100, 100, 100, 100],
          barWidth: 24,
          itemStyle: {
            normal: {
              color: function (params) {
                var num = myColor.length
                return myColor[params.dataIndex % num]
              },
              barBorderRadius: 5
            }
          },
          z: 0
        }]
      })
    },
    drawLine4 () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('echart4'))
      // 绘制图表
      // 职称结构取数
      var getsjjg = this.echarts4_name
      var getsjjgrs = this.echarts4_data
      var syjgdata = []
      for (var i = 0; i < getsjjg.length; i++) {
        syjgdata.push({
          name: getsjjg[i],
          value: getsjjgrs[i]
        })
      }
      var rich = {
        name: {
          color: '#eeeeee',
          fontSize: 14,
          padding: [8, 30, 0, 30],
          fontWeight: '400',
          align: 'left'
        },
        value: {
          color: '#0',
          fontSize: 15,
          padding: [0, 30, 8, 30],
          fontWeight: '500',
          align: 'left'
        },
        percent: {
          color: '#FFF',
          align: 'right',
          fontSize: 15,
          fontWeight: '500'
          // padding: [0, 5]
        },
        hr: {
          borderColor: '#DFDFDF',
          width: '100%',
          borderWidth: 1,
          height: 0
        },
        cir: {
          fontSize: 26
        }
      }
      // 职称结构图表
      var colorList = ['#507AFF', '#51D9A2', '#FFC371']
      myChart.setOption({
        backgroundColor: '#0e2147',
        series: [{
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList[params.dataIndex]
              }
            }
          },
          type: 'pie',
          radius: ['0%', '50%'],
          center: ['50%', '50%'],
          label: {
            normal: {
              position: 'inner',
              formatter: params => {
                return (
                  '{percent|' + params.percent.toFixed(0) + '%}'
                )
              },
              rich: rich
            }
          },
          data: syjgdata
        }, {
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList[params.dataIndex]
              }
            }
          },
          type: 'pie',
          silent: true, // 取消高亮
          radius: ['0%', '50%'],
          center: ['50%', '50%'],
          labelLine: {
            normal: {
              length: 30,
              length2: 0,
              lineStyle: {
                color: 'transparent'
              }
            }
          },
          label: {
            normal: {

              formatter: params => {
                return '{name|' + params.name + '}\n{hr|}\n{value|' + params.value + '人}'
              },
              rich: rich,
              padding: [2, 25, 0, 25]
            }
          },
          data: syjgdata,
          z: -1
        }, {
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList[params.dataIndex]
              }
            }
          },
          type: 'pie',
          silent: true, // 取消高亮
          radius: ['0%', '50%'],
          center: ['50%', '50%'],
          labelLine: {
            normal: {
              length: 30,
              length2: 0,
              lineStyle: {
                color: 'transparent'
              }
            }
          },
          label: {
            normal: {
              formatter: params => {
                return '\n{cir|●}\n'
              },
              rich: rich
            }
          },
          data: syjgdata,
          z: -1
        }, {
          itemStyle: {
            normal: {
              color: '#F2F9F7'
            }
          },
          type: 'pie',
          silent: true, // 取消高亮
          radius: ['0%', '57%'],
          center: ['50%', '50%'],
          hoverAnimation: false, // 取消动画效果
          data: syjgdata,
          label: {
            normal: {
              show: false,
              position: 'inner',
              formatter: params => {
                return (
                  '{percent|' + params.percent.toFixed(0) + '%}'
                )
              },
              rich: rich
            }
          },
          z: -1
        }]
      })
    },
    drawLine5 () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('echart5'))
      const echarts5_data = this.echarts5_data
      // 绘制图表
      myChart.setOption({
        backgroundColor: '#0e2147',
        // title: {
        //     text: '南丁格尔玫瑰图',
        //     left: 'center',
        //     top: 20,
        //     textStyle: {
        //         color: '#ccc'
        //     }
        // },

        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },

        visualMap: {
          show: false,
          min: 500,
          max: 600,
          inRange: {
            // colorLightness: [0, 1]
          }
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '50%',
          center: ['50%', '50%'],
          color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], // '#FBFE27','rgb(11,228,96)','#FE5050'
          data: echarts5_data.sort(function (a, b) {
            return a.value - b.value
          }),
          roseType: 'radius',

          label: {
            normal: {
              formatter: ['{c|{c}次}', '{b|{b}}'].join('\n'),
              rich: {
                c: {
                  color: 'rgb(241,246,104)',
                  fontSize: 20,
                  fontWeight: 'bold',
                  lineHeight: 5
                },
                b: {
                  color: 'rgb(98,137,169)',
                  fontSize: 15,
                  height: 40
                }
              }
            }
          },
          labelLine: {
            normal: {
              lineStyle: {
                color: 'rgb(98,137,169)'
              },
              smooth: 0.2,
              length: 10,
              length2: 20

            }
          },
          itemStyle: {
            normal: {
              shadowColor: 'rgba(0, 0, 0, 0.8)',
              shadowBlur: 50
            }
          }
        }]
      })
    }
  }
}
</script>

<style lang="less">
    .home {
        height: 550px;
        width: 730px;
        background: #d3dce6;
        margin-top: 15px;
    }

    .box {
        height: 140px;
        width: 700px;
        /* background-color: bisque; */
        margin: 10px auto;
        display: flex;
    }

    .box div {
        height: 140px;
        width: 150px;
        margin-left: 20px;
        margin-top: 20px;
    }

    .dibu {
        height: 280px;
        width: 670px;
    }

    .dibu_box1 {
        width: 620px;
        height: 280px;
        background: rgb(76, 80, 79);
    }

    .dibu1 {
        height: 100%;
        width: 620px;
        background: rgb(76, 80, 79);
    }
</style>
